<template>
     <div class="useract hotword" id="pai"></div>
</template>
<script>
 import echarts from 'echarts'
export default {
  data(){
    return{
       chart: null,
    }
  },
  created:function(){
    this.$nextTick(() => {
      this.drawPai('pai')
    })
  },
  methods:{
    drawPai(id){
      this.chart = echarts.init(document.getElementById(id))
      this.chart.setOption({
            title: {
                text: '地域分布排行'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: true,
                //orient: 'vertical',
                left: 'right',
                top: 'top',
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01],
                show:false
            },
            yAxis: {
                type: 'category',
                data: ['北京','南京','重庆','厦门','山西','河北','吉林','河北','辽宁','黑龙江','江苏'],
                axisLine:{
                    show:false
                },
                axisTick:{
                     show:false
                }

            },
            series: [
                {
                    name: '2011年',
                    type: 'bar',
                    itemStyle: {
                      normal: {
                        color: '#D9D2FA'
                      }
                    },
                    data: ['120','230','23','432','330','123','220','110','56','43','440']
                }
            ]

      })
    }
  }
}
</script>
<style>
.hotword{width:90%;height:400px;}
</style>